<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="resources/css-resources-referrer.css">
<style>
@font-face {
    font-family: faceInDocument;
    src: url('resources/referrer-check.php?from=document&resource=font');
}
.imageInDocument {
    background-image: url('resources/referrer-check.php?from=document&resource=image');
}
.imageSetInDocument {
    background-image: -webkit-image-set(
        url('resources/referrer-check.php?from=document&resource=image2') 1x,
        url('resources/referrer-check.php?from=document&resource=image') 1x
    );
}
</style>

<p>This page tests whether the referrer of css resources are set to the URL of the stylesheet.</p>

<p>Following text should be rendered with ahem font.</p>

<div style="font-family: faceInDocument;">
    Text for webfont defined in document.
</div>
<div style="font-family: faceInSheet;">
    Text for webfont defined in stylesheet.
</div>
<div style="font-family: faceInImportedSheet;">
    Text for webfont defined in imported stylesheet.
</div>

<p>Background image of following text should be dark blue.</p>

<div class="imageInDocument">Image in document</div>
<div class="imageInSheet">Image in stylesheet</div>
<div class="imageInImportedSheet">Image in imported stylesheet</div>

<div class="imageSetInDocument">Image set in document</div>
<div class="imageSetInSheet">Image set in stylesheet</div>
<div class="imageSetInImportedSheet">Image set in imported stylesheet</div>

<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    document.fonts.ready.then(function() { testRunner.notifyDone(); });
}
</script>
